<template>
  <div>
    <ul id="container"></ul>
  </div>
</template>

<script>
export default {
  name: 'test',
  data () {
    return {
      a: ''
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      // 需要插入的容器
      let ul = document.getElementById('container')
      // 插入十万条数据
      let total = 100000
      // 一次插入 20 条
      let once = 20
      // 总页数
      // let page = total / once
      // 每条记录的索引
      let index = 0
      // 循环加载数据
      function loop (curTotal, curIndex) {
        if (curTotal <= 0) {
          return false
        }
        // 每页多少条
        let pageCount = Math.min(curTotal, once)
        let timer = window.requestAnimationFrame(function () {
          let fragment = document.createDocumentFragment()
          for (let i = 0; i < pageCount; i++) {
            let li = document.createElement('li')
            li.innerText = curIndex + i + ' : ' + ~~(Math.random() * total)
            fragment.appendChild(li)
          }
          ul.appendChild(fragment)
          clearTimeout(timer)
          timer = null
          loop(curTotal - pageCount, curIndex + pageCount)
        })
      }

      loop(total, index)
    }
  }
}
</script>

<style lang="less" scoped></style>
